@import '../components/status';

.c7n-pipelineRecord-wrapper {

  .c7n-pipelineRecord-select {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;

    &-200 {
      width: 200px;
    }

    &-380 {
      width: 380px;
    }

    .c7n-pipelineRecord-search-related {

      .c7n-select-selection--multiple .c7n-select-selection__choice {
        background: none;
        padding: 0;
        margin: 0 8px 0 0;

        &:after {
          content: ',';
        }

        &:nth-last-child(2):after {
          content: none;
        }
      }
    }
  }

  .c7n-pipelineRecord-process {
    display: flex;
    align-items: center;

    .c7n-process-content {
      display: flex;
      align-items: center;

      .c7n-process-status {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #d3d3d3;

        &-success {
          background-color: $success;
        }

        &-failed {
          background-color: $failed;
        }

        &-running {
          background-color: $running;
        }

        &-stop {
          background-color: $stop;
        }

        &-pendingcheck {
          background-color: $pendingcheck;
        }
      }

      .c7n-process-line {
        margin: 0 4px;
        width: 8px;
        border-bottom: 1px solid #d3d3d3;

        &-stop {
          width: 13px;
          border-bottom: 3px dotted $stop;
        }

        &-pendingcheck {
          width: 13px;
          border-bottom: 3px dotted $pendingcheck;
        }
      }

      .c7n-process-svg {
        width: 8px;
        height: 8px;
        border-radius: 8px;
      }

      &:first-child {

        .c7n-process-line {
          display: none;
        }
      }
    }
  }

  .mg-right-16 {
    margin-right: 16px;
  }

  .c7n-name-error-icon {
    color: #f44336;
    margin-left: 5px;
  }
}
